<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表页-手机秒杀</title>
    <meta name="description" content="cmall.com-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">
    <!-- 如果页面的图标没有加载，需要加上下面的语句   -->
    <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!--   shortcut  -->
<div class="shortcut">
    <div class="w">
        <div class="fl">
            duoduo欢迎您！请
            <a href="#">登录</a>
            <a href="#" class="style-red">免费注册</a>
        </div>
        <div class="fr">
            <ul class="shortcut-menu">
                <li><a href="#">我的订单</a></li>
                <li class="spacer"></li>
                <li><a href="#">个人中心</a></li>
                <li class="spacer"></li>
                <li><a href="#">多多会员</a></li>
                <li class="spacer"></li>
                <li><a href="#">企业采购</a></li>
                <li class="spacer"></li>
                <li><a href="#">关注多多商城</a></li>
                <li class="spacer"></li>
                <li><a href="#">客户服务</a></li>
                <li class="spacer"></li>
                <li><a href="#">网站导航</a></li>
            </ul>
        </div>
    </div>
</div>

<!--  header  -->
<div class="header w">
    <!--   1号  -->
    <div class="logo">
        <h1>
            <a href="index.html">多多商城</a>
        </h1>
    </div>
    <!-- 秒杀logo盒子 -->
    <div class="second-kill">
        <img src="images/sk.png" alt="">
    </div>
    <!--   2号  -->
    <div class="search">
        <input type="text" class="text" placeholder="请输入要搜索的商品">
        <button class="btn" >搜&nbsp;索</button>
    </div>
    <!--   3号  -->
    <div class="hotwords">
        <a href="#" class="style-red">钻戒1克拉</a>
        <a href="#">薯条</a>
        <a href="#">电脑数码</a>
        <a href="#">手机</a>
        <a href="#">手机卡</a>
        <a href="#">手机壳</a>
        <a href="#">贴膜</a>
    </div>
    <!--   4号  -->
    <div class="shopcar">
        <a href="#">
            <i class="car"></i>
            <i class="my">我的购物车</i>
            <i class="arrow"></i>
            <i class="count">888</i>
        </a>
    </div>
</div>

<!-- nav 导航 -->
<div class="nav">
    <div class="w">
        <!--  左侧菜单：秒杀菜单  -->
        <div class="sk-list fl">
            <ul>
                <li><a href="#">品牌秒杀</a></li>
                <li><a href="#">即将售罄</a></li>
                <li><a href="#">超值低价</a></li>
            </ul>
        </div>
        <!--  右侧菜单：二级秒杀菜单  -->
        <div class="sk-content fl">
            <ul>
                <li><a href="#">女装</a></li>
                <li><a href="#">女鞋</a></li>
                <li><a href="#">男装</a></li>
                <li><a href="#">男鞋</a></li>
                <li><a href="#">母婴童装</a></li>
                <li><a href="#">食品</a></li>
                <li><a href="#">智能数码</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">更多分类</a></li>
            </ul>
        </div>
    </div>
</div>

    <!-- 列表页的主体内容 -->
<div class="sk-container w">
        <!--  1号：顶部图片  -->
    <div class="sk-head">
        <img src="images/second-banner.png" alt="">
    </div>
        <!--  2号：商品列表 ,高度不定，通过内容撑起盒子的高度 -->
    <div class="sk-body">
        <ul>
                <!-- 每一个Li就是一个商品 -->
            <li class="sk-goods">
                    <!-- 2.1号  :主图和主标题都是能点的 -->
                    <a href="#">
                        <img src="upload/mobile.png" class="sk-goods-img">
                        <h5 class="sk-goods-title">
                            Apple苹果iPhone 6s Plus (A1699) 32G 移动联通电信4G手机</h5>
                    </a>
                    <!-- 2.2号 价格  -->
                    <div class="sk-goods-price">
                        <em>¥5999</em>
                        <del>¥6598</del>
                    </div>
                    <!-- 2.3号 :抢购进度  -->
                    <div class="sk-goods-progress">
                        <span>已售<em>87</em>%</span>
                        <div class="sold-bar">
                            <div class="sold-bar-in"></div>
                        </div>
                        <span>剩余<em>15</em>件</span>
                    </div>
                    <!-- 2.4号   -->
                    <a href="#" class="sk-goods-buy">立即抢购</a>
                </li>
                <!-- 每一个Li就是一个商品 -->
            <li class="sk-goods">
                    <!-- 2.1号  :主图和主标题都是能点的 -->
                    <a href="#">
                        <img src="upload/mobile.png" class="sk-goods-img">
                        <h5 class="sk-goods-title">
                            Apple苹果iPhone 6s Plus (A1699) 32G 移动联通电信4G手机</h5>
                    </a>
                    <!-- 2.2号 价格  -->
                    <div class="sk-goods-price">
                        <em>¥5999</em>
                        <del>¥6598</del>
                    </div>
                    <!-- 2.3号 :抢购进度  -->
                    <div class="sk-goods-progress">
                        <span>已售<em>87</em>%</span>
                        <div class="sold-bar">
                            <div class="sold-bar-in"></div>
                        </div>
                        <span>剩余<em>15</em>件</span>
                    </div>
                    <!-- 2.4号   -->
                    <a href="#" class="sk-goods-buy">立即抢购</a>
                </li>
                <!-- 每一个Li就是一个商品 -->
            <li class="sk-goods">
                    <!-- 2.1号  :主图和主标题都是能点的 -->
                    <a href="#">
                        <img src="upload/mobile.png" class="sk-goods-img">
                        <h5 class="sk-goods-title">
                            Apple苹果iPhone 6s Plus (A1699) 32G 移动联通电信4G手机</h5>
                    </a>
                    <!-- 2.2号 价格  -->
                    <div class="sk-goods-price">
                        <em>¥5999</em>
                        <del>¥6598</del>
                    </div>
                    <!-- 2.3号 :抢购进度  -->
                    <div class="sk-goods-progress">
                        <span>已售<em>87</em>%</span>
                        <div class="sold-bar">
                            <div class="sold-bar-in"></div>
                        </div>
                        <span>剩余<em>15</em>件</span>
                    </div>
                    <!-- 2.4号   -->
                    <a href="#" class="sk-goods-buy">立即抢购</a>
                </li>
                <!-- 每一个Li就是一个商品 -->
            <li class="sk-goods">
                    <!-- 2.1号  :主图和主标题都是能点的 -->
                    <a href="#">
                        <img src="upload/mobile.png" class="sk-goods-img">
                        <h5 class="sk-goods-title">
                            Apple苹果iPhone 6s Plus (A1699) 32G 移动联通电信4G手机</h5>
                    </a>
                    <!-- 2.2号 价格  -->
                    <div class="sk-goods-price">
                        <em>¥5999</em>
                        <del>¥6598</del>
                    </div>
                    <!-- 2.3号 :抢购进度  -->
                    <div class="sk-goods-progress">
                        <span>已售<em>87</em>%</span>
                        <div class="sold-bar">
                            <div class="sold-bar-in"></div>
                        </div>
                        <span>剩余<em>15</em>件</span>
                    </div>
                    <!-- 2.4号   -->
                    <a href="#" class="sk-goods-buy">立即抢购</a>
                </li>
                <!-- 每一个Li就是一个商品 -->
            <li class="sk-goods">
                    <!-- 2.1号  :主图和主标题都是能点的 -->
                    <a href="#">
                        <img src="upload/mobile.png" class="sk-goods-img">
                        <h5 class="sk-goods-title">
                            Apple苹果iPhone 6s Plus (A1699) 32G 移动联通电信4G手机</h5>
                    </a>
                    <!-- 2.2号 价格  -->
                    <div class="sk-goods-price">
                        <em>¥5999</em>
                        <del>¥6598</del>
                    </div>
                    <!-- 2.3号 :抢购进度  -->
                    <div class="sk-goods-progress">
                        <span>已售<em>87</em>%</span>
                        <div class="sold-bar">
                            <div class="sold-bar-in"></div>
                        </div>
                        <span>剩余<em>15</em>件</span>
                    </div>
                    <!-- 2.4号   -->
                    <a href="#" class="sk-goods-buy">立即抢购</a>
                </li>
                <!-- 每一个Li就是一个商品 -->
            <li class="sk-goods">
                    <!-- 2.1号  :主图和主标题都是能点的 -->
                    <a href="#">
                        <img src="upload/mobile.png" class="sk-goods-img">
                        <h5 class="sk-goods-title">
                            Apple苹果iPhone 6s Plus (A1699) 32G 移动联通电信4G手机</h5>
                    </a>
                    <!-- 2.2号 价格  -->
                    <div class="sk-goods-price">
                        <em>¥5999</em>
                        <del>¥6598</del>
                    </div>
                    <!-- 2.3号 :抢购进度  -->
                    <div class="sk-goods-progress">
                        <span>已售<em>87</em>%</span>
                        <div class="sold-bar">
                            <div class="sold-bar-in"></div>
                        </div>
                        <span>剩余<em>15</em>件</span>
                    </div>
                    <!-- 2.4号   -->
                    <a href="#" class="sk-goods-buy">立即抢购</a>
                </li>
                <!-- 每一个Li就是一个商品 -->
            <li class="sk-goods">
                    <!-- 2.1号  :主图和主标题都是能点的 -->
                    <a href="#">
                        <img src="upload/mobile.png" class="sk-goods-img">
                        <h5 class="sk-goods-title">
                            Apple苹果iPhone 6s Plus (A1699) 32G 移动联通电信4G手机</h5>
                    </a>
                    <!-- 2.2号 价格  -->
                    <div class="sk-goods-price">
                        <em>¥5999</em>
                        <del>¥6598</del>
                    </div>
                    <!-- 2.3号 :抢购进度  -->
                    <div class="sk-goods-progress">
                        <span>已售<em>87</em>%</span>
                        <div class="sold-bar">
                            <div class="sold-bar-in"></div>
                        </div>
                        <span>剩余<em>15</em>件</span>
                    </div>
                    <!-- 2.4号   -->
                    <a href="#" class="sk-goods-buy">立即抢购</a>
                </li>
                <!-- 每一个Li就是一个商品 -->
            <li class="sk-goods">
                    <!-- 2.1号  :主图和主标题都是能点的 -->
                    <a href="#">
                        <img src="upload/mobile.png" class="sk-goods-img">
                        <h5 class="sk-goods-title">
                            Apple苹果iPhone 6s Plus (A1699) 32G 移动联通电信4G手机</h5>
                    </a>
                    <!-- 2.2号 价格  -->
                    <div class="sk-goods-price">
                        <em>¥5999</em>
                        <del>¥6598</del>
                    </div>
                    <!-- 2.3号 :抢购进度  -->
                    <div class="sk-goods-progress">
                        <span>已售<em>87</em>%</span>
                        <div class="sold-bar">
                            <div class="sold-bar-in"></div>
                        </div>
                        <span>剩余<em>15</em>件</span>
                    </div>
                    <!-- 2.4号   -->
                    <a href="#" class="sk-goods-buy">立即抢购</a>
                </li>
            </ul>
        </div>
<!--    加一个div，清除浮动-->
    <div class="clearfix"></div>
    <!--  3号：分页  -->
    <div class="page">
        <!-- 使用行内元素span装分页组件，比较容易实现居中 text-align:center  -->
        <span class="page-num">
                <!--  previous 上一个 -->
                <a href="#" class="pn-prev">上一页</a>
                <a href="#">1</a>
                <a href="#" class="current-page style-red">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
                <a href="#" class="dot-page">...</a>
                <a href="#" class="pn-next">下一页</a>
            </span>
        <span class="page-skip">
                共10页&nbsp;到第
                <input type="text">
                页
                <button>确定</button>
            </span>
    </div>
</div>

<!--  footer 底部   -->
<div class="footer">
    <div class="w">
        <!--  1号 service   -->
        <div class="mod-service">
            <ul>
                <li>
                    <!-- 做1个    -->
                    <i class="mod-service-icon icon-zhengpin"></i>
                    <div class="mod-service-title">
                        <h5>正品保障</h5>
                        <p>正品保障，提供发票</p>
                    </div>
                </li>
                <li>
                    <!-- 做1个    -->
                    <i class="mod-service-icon icon-wuliu"></i>
                    <div class="mod-service-title">
                        <h5>极速物流</h5>
                        <p>极速物流，急速送达</p>
                    </div>
                </li>
                <li>
                    <!-- 做1个    -->
                    <i class="mod-service-icon icon-wuyou"></i>
                    <div class="mod-service-title">
                        <h5>无忧售后</h5>
                        <p>7天无理由退货</p>
                    </div>
                </li>
                <li>
                    <!-- 做1个    -->
                    <i class="mod-service-icon icon-tese"></i>
                    <div class="mod-service-title">
                        <h5>特色服务</h5>
                        <p>私人定制家电套餐</p>
                    </div>
                </li>
                <li>
                    <!-- 做1个    -->
                    <i class="mod-service-icon icon-bangzhu"></i>
                    <div class="mod-service-title">
                        <h5>帮助中心</h5>
                        <p>您的购物指南</p>
                    </div>
                </li>
            </ul>
        </div>
        <!--  2号 help   -->
        <div class="mod-help">
            <dl class="mod-help-item">
                <dt>购物指南</dt>
                <dd>购物流程</dd>
                <dd>会员介绍</dd>
                <dd>生活旅行/团购</dd>
                <dd>常见问题</dd>
                <dd>大家电</dd>
                <dd>联系客服</dd>
            </dl>
            <dl class="mod-help-item">
                <dt>购物指南</dt>
                <dd>购物流程</dd>
                <dd>会员介绍</dd>
                <dd>生活旅行/团购</dd>
                <dd>常见问题</dd>
                <dd>大家电</dd>
                <dd>联系客服</dd>
            </dl>
            <dl class="mod-help-item">
                <dt>购物指南</dt>
                <dd>购物流程</dd>
                <dd>会员介绍</dd>
                <dd>生活旅行/团购</dd>
                <dd>常见问题</dd>
                <dd>大家电</dd>
                <dd>联系客服</dd>
            </dl>
            <dl class="mod-help-item">
                <dt>购物指南</dt>
                <dd>购物流程</dd>
                <dd>会员介绍</dd>
                <dd>生活旅行/团购</dd>
                <dd>常见问题</dd>
                <dd>大家电</dd>
                <dd>联系客服</dd>
            </dl>
            <dl class="mod-help-item">
                <dt>购物指南</dt>
                <dd>购物流程</dd>
                <dd>会员介绍</dd>
                <dd>生活旅行/团购</dd>
                <dd>常见问题</dd>
                <dd>大家电</dd>
                <dd>联系客服</dd>
            </dl>
            <dl class="mod-help-item mod-help-app">
                <dt>帮助中心</dt>
                <dd>
                    <img src="images/2weima.png" alt="" title="请扫码下载">
                    <p>商城APP</p>
                </dd>
            </dl>
        </div>
        <!--  3号 copyright   -->
        <div class="mod-copyright">
            <div class="links">
                <ul>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">联系客服</a></li>
                    <li><a href="#">商家入驻</a></li>
                    <li><a href="#">营销中心</a></li>
                    <li><a href="#">手机多多商城</a></li>
                    <li><a href="#">友情链接</a></li>
                    <li><a href="#">销售联盟</a></li>
                    <li><a href="#">多多商城公益</a></li>
                    <li><a href="#">English Site</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
            <p class="copyright">地址：北京市昌平区XXXXXX办公楼一层 邮编：100000 电话：400-666-8888 邮箱：zhang@xxx.com</p>
            <p class="info">京ICP备00483418/京公安备1531135434153</p>
        </div>
    </div>
</div>
</body>
</html>